<template>
	<div class="role">
		<div class="title">
			<div class="sea">
				<div class="item">
					<el-form label-width="">
						<el-row :gutter="12">
							<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
								<el-form-item label="公司名称" >
									<el-select v-model="company" clearable @change="search" style="width: 70%;" placeholder="请选择状态">
										<el-option
											v-for="(item,index) in company_list"
											:key="index"
											:label="item"
											:value="item">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
								<el-form-item label="状态">
									<el-select v-model="status" clearable @change="search" style="width: 70%;" placeholder="请选择状态">
										<el-option
											v-for="(item,index) in status_list"
											:key="index"
											:label="item.label"
											:value="item.value">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
								<el-form-item label="品牌">
									<el-select v-model="brand_type" clearable @change="search" style="width: 70%;" placeholder="请选择品牌">
										<el-option
											v-for="(item,index) in brand_type_list"
											:key="index"
											:label="item"
											:value="item">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
								<el-form-item label="测试结果">
									<el-select v-model="result" clearable @change="search" style="width: 70%;" placeholder="请选择测试结果">
										<el-option
											v-for="(item,index) in result_list"
											:key="index"
											:label="item"
											:value="item">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>

						</el-row>
					</el-form>
				</div>
				<div class="item">
					<el-row :gutter="10">
						<el-col :xs="22" :sm="22" :md="22" :lg="22" :xl="22">
							<span>关键字:</span>
							<el-input v-model="keyword" clearable placeholder="请输入关键字: 产品名称/测试设备型号/测试设备did" style="width: 42%;" @change="search"></el-input>
							<el-button type="primary" @click="search">查询</el-button>
						</el-col>
					</el-row>
				</div>

			</div>
		</div>
		<div class="tab">
			<el-table
				v-if="initTableList"
				class="marT"
				:data="initTableList.slice((current-1)*size, current*size)"
				:border="true"
				:header-cell-style="{background:'#eef1f6'}">
				<el-table-column
					align="center"
					type="index"
					label="序号"
					width="50">
				</el-table-column>
				<el-table-column align="center" property="company" label="公司名称" width="180"></el-table-column>
				<el-table-column align="center" property="brand_type" label="品牌类型" width="180"></el-table-column>
				<el-table-column align="center" property="product_model" label="产品型号" width="180"></el-table-column>
				<el-table-column align="center" property="product_name" label="产品名称" width="180"></el-table-column>
				<el-table-column align="center" property="prototype_did" label="测试设备did" width="180"></el-table-column>
				<el-table-column align="center" property="result" label="测试报告结果" width="180"></el-table-column>
				<el-table-column align="center" property="status" label="测试状态" width="150">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.status == 0" >待审核</el-tag>
						<el-tag v-if="scope.row.status == 1" type="success" >审核通过</el-tag>
						<el-tag v-if="scope.row.status == 2" type="warning" >驳回</el-tag>
						<el-tag v-if="scope.row.status == 3" type="info" >报告已生成</el-tag>
					</template>
				</el-table-column>
				<el-table-column align="center" property="own" label="创建信息" width="200">
					<template slot-scope="scope">
						<span>{{getLeader(scope.row.creator_show)}}</span><br>
						<span>{{getTime(scope.row.create_time)}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" property="tester_show" label="更新信息" width="200">
					<template slot-scope="scope">
						<span>{{getLeader(scope.row.updated_by) }}</span><br>
						<span>{{getTime(scope.row.update_time) }}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="操作" fixed="right" width="180">
					<template slot-scope="scope">
						<span><a  @click="toDetails(scope.row.id)">查看</a></span>
						<span v-if="scope.row.status == 0 || scope.row.status == 2"><a > | </a></span>
						<span v-if="scope.row.status == 0 || scope.row.status == 2"><a @click="toBianji(scope.row.id)">编辑</a></span>
						<span v-if="scope.row.status == 0 && power.includes('report_review')"><a > | </a></span>
						<span v-if="scope.row.status == 0 && power.includes('report_review')"><a @click="examine(scope.row.id)">审核</a></span>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				background
				layout="prev, pager, next"
				:page-size="tableSize"
				@size-change="tableSizeChange"
				@current-change="tableCurrentChange"
				:current-page="tableCurrent"
				style="text-align: center;height:100px;"
				:total="tableTotal">
			</el-pagination>
		</div>

		<examineForm ref="examineForm"></examineForm>

	</div>
</template>

<script>
import { reportGet, reportOptions } from '@/api/user'
import examineForm from "./model/examineForm";

export default {
	name: 'role',
	components:{
		examineForm
	},
	data(){
		return {
			company:'',
			brand_type:'',
			result:'',
			status:'',
			tableSize: 10,
			tableCurrent: 1,
			keyword: '',
			value: '',
			size: 10,
			current: 1,
			initTableList: [],
			tableTotal:1,
			power:[],
			brand_type_list:[],
			company_list:[],
			product_model_list:[],
			product_name_list:[],
			prototype_did_list:[],
			result_list:[],
			status_list:[],
			pending:false
		}
	},
	mounted() {

	},
	created() {
		this.pending = this.$route.query.pending
		this.initTable()
	},
	methods:{
		getRole(data){
			let name = ''
			data.filter((item,index) => {
				if(index < data.length-1){
					name += item + '，'
				}else {
					name += item
				}
			})
			return name
		},
		tableSizeChange(val) {
			this.tableSize = val
		},
		tableCurrentChange(val) {
			this.tableCurrent = val
			var params ={
				pageNo:this.tableCurrent,
				pageSize:this.tableSize
			}
			reportGet(params).then(res => {
				if(res.code == 200){
					this.initTableList = res.data.data
					this.tableTotal = res.data.totalCount
				}
			})
		},
		search(){
			reportGet({
				keywords:this.keyword,
				status:this.status,
				company:this.company,
				brand_type:this.brand_type,
				result:this.result
			}).then(res => {
				if(res.code == 200){
					this.initTableList = res.data.data
					this.tableTotal = res.data.totalPage
				}
			})
		},
		initTable(){
			var params ={
				pageNo:1,
				pageSize:10,
				pending:this.pending
			}
			reportGet(params).then(res => {
				if(res.code == 200){
					this.power = sessionStorage.getItem('power').split(',')
					this.initTableList = res.data.data
					this.tableTotal = res.data.totalCount
				}
			})

			reportOptions().then(res => {
				// brand_type_list: ["品牌类别", "小米品牌"]
				// company_list: ["测试申请公司", "申请公司"]
				// product_model_list: ["123", "产品Model"]
				// product_name_list: ["测试产品名称", "产品名称"]
				// prototype_did_list: ["测试设备DID"]
				this.brand_type_list = res.data.brand_type_list
				this.company_list = res.data.company_list
				this.product_model_list = res.data.product_model_list
				this.product_name_list = res.data.product_name_list
				this.prototype_did_list = res.data.prototype_did_list
				this.result_list = res.data.result_list
				this.status_list = res.data.status_list

				console.log(res,12121)
			})
		},
		getLeader(data){
			if(data){
				return data['name']
			}
			else {
				return '暂无'
			}
		},
		getTime(data){
			if(data){
				var d = new Date(data);
				var d2 = d.getTime() - 8 * 60 * 60 * 1000
				d = new Date(d2)
				var  resDate = d.getFullYear() + '-' +
					((d.getMonth() + 1)<10?'0'+(d.getMonth() + 1):(d.getMonth() + 1)) + '-' +
					(d.getDate()<10?'0'+d.getDate():d.getDate())+ ' '+
					(d.getHours()<10?'0'+d.getHours():d.getHours())+':'+
					(d.getMinutes()<10?'0'+d.getMinutes():d.getMinutes())+':'+
					(d.getSeconds()<10?'0'+d.getSeconds():d.getSeconds());
				return resDate
			}else {
				return '暂无'
			}

		},
		toDetails(data){
			this.$router.push(`/testingreport/${data}/3`)
		},
		toBianji(data){
			this.$router.push(`/testingreport/${data}/2`)
		},
		examine(data){
			this.$refs.examineForm.dialogFormVisible = true
			this.$refs.examineForm.initData(data)
		}
	}
}
</script>

<style lang="scss" scoped>
.role{
	padding: 0 10px;
	.title{
		width: 100%;
		padding: 20px;
		background-color: #fff;
		margin: 5px 0;
	}
	.tab{
		width: 100%;
		padding: 20px;
		background-color: #fff;
	}
	.box{
		.details{
			margin-left: 5px;
		}
	}
}


</style>
